﻿<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>jQuery UI Droppable - Revert draggable position</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
    <script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
    <style>
        #draggable
        {
            width: 150px;
            height: 150px;
            float: left;
        }
        #droppable
        {
            width: 100px;
            height: 100px;
            margin: 0 auto;
        }
        
        .width_100
        {
            width: 800px;
            height: 1000px;
            overflow: auto;
            margin: 0px auto;
            z-index: -100;
        }
    </style>
    <script type="text/javascript">
        $(function () {
            $("#draggable").draggable();

            $("#droppable").droppable({
                tolerance: "pointer",
                activeClass: "ui-state-hover",
                hoverClass: "ui-state-active",
                drop: function (event, ui) {

                    $(this).addClass("ui-state-highlight");
                    //console.log(event.pageX + " : " + event.pageY);

                    var newPosition = clacMouseOffset(ui.draggable, $(this), { "X": event.pageX, "Y": event.pageY });
                    console.log(newPosition.left + " : " + newPosition.top);
                    
                    ui.draggable.appendTo($(this));
                    ui.draggable.css({ width: "100px", height: "100px" }, 1000);
                    ui.draggable.css(newPosition);

                }
            });
        });

        function zoomTest() {
            $("#draggable").animate({ width: "100px", height: "100px" }, { queue: false, duration: 3000 })
        }


        function calcOffset(src, target) {
            return {
                "left": parseInt(src.offset().left - target.offset().left, 10) + "px",
                "top": parseInt(src.offset().top - target.offset().top, 10) + "px"
            }
        }

        function clacMouseOffset(src, target, ePage_src) {
            var mousePos = {
                "X": ePage_src.X - src.offset().left,
                "Y": ePage_src.Y - src.offset().top
            };
            var ePage_target = {
                "X": (mousePos.X / src.width()) * target.width(),
                "Y": (mousePos.Y / src.height()) * target.height()
            };
            var ePage_diff = {
                "X": (mousePos.X - ePage_target.X) / 2,
                "Y": (mousePos.Y - ePage_target.Y) / 2
            };
            var position = {
                "left": src.offset().left - target.offset().left,
                "top": src.offset().top - target.offset().top
            };

            var newPosition = {
                "left": Math.abs(position.left) - Math.abs(ePage_diff.X),
                "top": Math.abs(position.top) - Math.abs(ePage_diff.Y),
            };

            if(position.left<0){
                newPosition.left = "-" + parseInt(newPosition.left,10) +"px";
            }else{
                newPosition.left = parseInt(newPosition.left,10) +"px";
            }

            if(position.top<0){
                newPosition.top = "-" + parseInt(newPosition.top,10) +"px";
            }else{
                newPosition.top = parseInt(newPosition.top,10) +"px";
            }

            return newPosition;
        }

    </script>
</head>
<body>
<h1>测试缩放，mouse 位置不变</h1>
    <div id="droppable" class="ui-widget-header">
    </div>
    <div id="draggable" class="ui-widget-content">
        <p>
            I revert when I'm dropped</p>
    </div>
</body>
</html>
